<template>
  <t-dialog
    :visible="visible"
    @update:visible="$emit('update:visible', $event)"
    header="用户详情"
    :width="800"
    :footer="false"
    @close="handleClose"
  >
    <div class="user-detail-container">
      <t-loading :loading="loading" size="small">
        <div v-if="userData" class="user-detail-content">
          <!-- 用户头像和基本信息 -->
          <div class="user-header">
            <div class="user-avatar">
              <t-avatar 
                :size="80" 
                :image="userData.avatar"
                class="avatar-image"
              >
                {{ (userData.nickname || userData.username || 'U').charAt(0).toUpperCase() }}
              </t-avatar>
              <div class="user-status">
                <t-tag 
                  :theme="userData.status === 'active' ? 'success' : 'danger'"
                  variant="light"
                >
                  {{ userData.status === 'active' ? '正常' : '禁用' }}
                </t-tag>
              </div>
            </div>
            
            <div class="user-info">
              <h3 class="user-name">{{ userData.nickname || userData.username }}</h3>
              <div class="user-meta">
                <div class="meta-item">
                  <span class="meta-label">用户名:</span>
                  <span class="meta-value">{{ userData.username }}</span>
                </div>
                <div class="meta-item">
                  <span class="meta-label">邮箱:</span>
                  <span class="meta-value">{{ userData.email || '未设置' }}</span>
                </div>
                <div class="meta-item">
                  <span class="meta-label">手机:</span>
                  <span class="meta-value">{{ userData.phone || '未设置' }}</span>
                </div>
              </div>
            </div>
          </div>
          
          <!-- 详细信息卡片 -->
          <div class="detail-cards">
            <!-- 基本信息 -->
            <t-card class="detail-card" title="基本信息" :bordered="false">
              <div class="info-grid">
                <div class="info-item">
                  <span class="info-label">昵称</span>
                  <span class="info-value">{{ userData.nickname || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">性别</span>
                  <span class="info-value">{{ getGenderText(userData.gender) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">生日</span>
                  <span class="info-value">{{ userData.birthday || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">创建时间</span>
                  <span class="info-value">{{ formatDate(userData.createdAt) }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">最后登录</span>
                  <span class="info-value">{{ formatDate(userData.lastLoginAt) || '从未登录' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">登录次数</span>
                  <span class="info-value">{{ userData.loginCount || 0 }}次</span>
                </div>
              </div>
            </t-card>
            
            <!-- 职业信息 -->
            <t-card class="detail-card" title="职业信息" :bordered="false">
              <div class="info-grid">
                <div class="info-item">
                  <span class="info-label">部门</span>
                  <span class="info-value">{{ userData.departmentName || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">职位</span>
                  <span class="info-value">{{ userData.position || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">员工编号</span>
                  <span class="info-value">{{ userData.employeeId || '未设置' }}</span>
                </div>
                <div class="info-item">
                  <span class="info-label">入职时间</span>
                  <span class="info-value">{{ userData.hiredAt || '未设置' }}</span>
                </div>
              </div>
            </t-card>
            
            <!-- 角色权限 -->
            <t-card class="detail-card" title="角色权限" :bordered="false">
              <div class="roles-section">
                <div class="roles-list">
                  <t-tag
                    v-for="role in userData.roles"
                    :key="role.id"
                    theme="primary"
                    variant="light"
                    class="role-tag"
                  >
                    {{ role.name }}
                  </t-tag>
                  <span v-if="!userData.roles || userData.roles.length === 0" class="no-roles">
                    暂无角色
                  </span>
                </div>
                
                <div v-if="userData.permissions && userData.permissions.length > 0" class="permissions-section">
                  <h4 class="permissions-title">权限列表</h4>
                  <div class="permissions-list">
                    <t-tag
                      v-for="permission in userData.permissions"
                      :key="permission.id"
                      theme="default"
                      variant="outline"
                      size="small"
                      class="permission-tag"
                    >
                      {{ permission.name }}
                    </t-tag>
                  </div>
                </div>
              </div>
            </t-card>
            
            <!-- 统计信息 -->
            <t-card class="detail-card" title="统计信息" :bordered="false">
              <div class="stats-grid">
                <div class="stat-item">
                  <div class="stat-number">{{ userData.stats?.orderCount || 0 }}</div>
                  <div class="stat-label">订单数量</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">{{ userData.stats?.taskCount || 0 }}</div>
                  <div class="stat-label">任务数量</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">{{ userData.stats?.messageCount || 0 }}</div>
                  <div class="stat-label">消息数量</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">{{ userData.stats?.documentCount || 0 }}</div>
                  <div class="stat-label">文档数量</div>
                </div>
              </div>
            </t-card>
            
            <!-- 备注信息 -->
            <t-card v-if="userData.remark" class="detail-card" title="备注信息" :bordered="false">
              <div class="remark-content">
                {{ userData.remark }}
              </div>
            </t-card>
          </div>
        </div>
        
        <div v-else class="empty-state">
          <t-icon name="user" size="48" />
          <p>暂无用户信息</p>
        </div>
      </t-loading>
      
      <!-- 操作按钮 -->
      <div class="detail-footer">
        <t-space>
          <t-button @click="handleClose">关闭</t-button>
          <t-button theme="primary" @click="handleEdit">
            <template #icon>
              <component :is="'EditIcon'" />
            </template>
            编辑
          </t-button>
        </t-space>
      </div>
    </div>
  </t-dialog>
</template>

<script setup>
import { computed } from 'vue'

// 定义 props
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  userData: {
    type: Object,
    default: null
  },
  loading: {
    type: Boolean,
    default: false
  }
})

// 定义 emits
const emit = defineEmits(['update:visible', 'edit', 'close'])

// 格式化日期
const formatDate = (date) => {
  if (!date) return ''
  return new Date(date).toLocaleString('zh-CN')
}

// 获取性别文本
const getGenderText = (gender) => {
  const genderMap = {
    male: '男',
    female: '女',
    other: '其他'
  }
  return genderMap[gender] || '未设置'
}

// 处理关闭
const handleClose = () => {
  emit('update:visible', false)
  emit('close')
}

// 处理编辑
const handleEdit = () => {
  emit('edit', props.userData)
}
</script>

<style scoped>
.user-detail-container {
  padding: 24px;
}

/* 用户头部信息 */
.user-header {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 32px;
  padding: 24px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
}

.user-avatar {
  position: relative;
}

.avatar-image {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.user-status {
  position: absolute;
  top: -8px;
  right: -8px;
}

.user-info {
  flex: 1;
}

.user-name {
  margin: 0 0 16px 0;
  font-size: 24px;
  font-weight: 600;
  color: var(--td-text-color-primary);
}

.user-meta {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.meta-label {
  font-weight: 500;
  color: var(--td-text-color-secondary);
  min-width: 60px;
}

.meta-value {
  color: var(--td-text-color-primary);
}

/* 详情卡片 */
.detail-cards {
  display: grid;
  gap: 24px;
}

.detail-card {
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* 信息网格 */
.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--td-text-color-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.info-value {
  font-size: 14px;
  color: var(--td-text-color-primary);
  font-weight: 500;
}

/* 角色部分 */
.roles-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.roles-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.role-tag {
  border-radius: 6px;
}

.no-roles {
  color: var(--td-text-color-placeholder);
  font-style: italic;
}

.permissions-section {
  margin-top: 16px;
}

.permissions-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--td-text-color-secondary);
}

.permissions-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.permission-tag {
  border-radius: 4px;
  font-size: 12px;
}

/* 统计信息 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 24px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background: var(--td-bg-color-container);
  border-radius: 8px;
}

.stat-number {
  font-size: 24px;
  font-weight: 600;
  color: var(--td-brand-color);
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  color: var(--td-text-color-secondary);
}

/* 备注内容 */
.remark-content {
  padding: 16px;
  background: var(--td-bg-color-container);
  border-radius: 8px;
  line-height: 1.6;
  color: var(--td-text-color-primary);
}

/* 空状态 */
.empty-state {
  text-align: center;
  padding: 48px;
  color: var(--td-text-color-placeholder);
}

.empty-state p {
  margin: 16px 0 0 0;
  font-size: 14px;
}

/* 底部操作 */
.detail-footer {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--td-border-level-1-color);
  display: flex;
  justify-content: flex-end;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .user-detail-container {
    padding: 16px;
  }
  
  .user-header {
    flex-direction: column;
    text-align: center;
  }
  
  .user-meta {
    align-items: center;
  }
  
  .info-grid {
    grid-template-columns: 1fr;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .roles-list {
    justify-content: center;
  }
  
  .permissions-list {
    justify-content: center;
  }
}
</style> 